import React, { Component, useEffect } from 'react';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { message, Upload } from 'antd';
// const beforeUpload = (file) => {
//     const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
//     if (!isJpgOrPng) {
//         message.error('You can only upload JPG/PNG file!');
//     }
//     const isLt2M = file.size / 1024 / 1024 < 2;
//     if (!isLt2M) {
//         message.error('Image must smaller than 2MB!');
//     }
//     return isJpgOrPng && isLt2M;
// };
export default class Uploads extends Component {
    state = {
        imageUrl: '',
        loading: false
    }
    handleChange = (info) => {
        if (info.file.status === 'done') {
            const imageUrl = info.file.response.result.img
            this.setImageUrl(imageUrl)
            const { keys, setFieldsValue} = this.props
            setFieldsValue({[keys]: imageUrl})
        }
    }
    setImageUrl = imageUrl => {
        this.setState({imageUrl})
    }
    render() {
        const { imageUrl, loading } = this.state
        return (
            <Upload
                name="avatar"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="http://localhost:9000/common/upload"
                // beforeUpload={beforeUpload}
                onChange={ this.handleChange }
            >
                {imageUrl ? (
                    <img
                        src={`${window.CONFIG.baseURL}/${imageUrl}`}
                        alt="avatar"
                        style={{width: '100%'}}
                    />
                ) : (
                    <div>
                        {loading ? <LoadingOutlined /> : <PlusOutlined />}
                        <div
                            style={{
                                marginTop: 8,
                            }}
                        >
                            Upload
                        </div>
                    </div>
                )}
            </Upload>
        );
    }
}

